<template>
    <canvas :width="width" :height="height" ref="canvasRef"></canvas>
</template>
  
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import * as GLMatrix from "gl-matrix";
import { loadImage } from "../../util/Util";
const width = ref(600);
const height = ref(600)
const canvasRef = ref<HTMLCanvasElement>()

const glView = computed(() => {
    const mat4 = GLMatrix.mat4.create();
    GLMatrix.mat4.ortho(mat4, 0, width.value, height.value, 0, -1, 1)
    return mat4;
})

const veSource = computed(() => {
    return `
        attribute vec4 a_Position;
        uniform mat4 view;
        attribute vec2 t_Position;
        // 二维坐标
        varying vec2 vPosition;
        void main(void){
            gl_Position =  view * a_Position;
            gl_PointSize = 1.0;
            vPosition = t_Position;
        }
    `
})

const faSource = computed(() => {
    return `
        precision mediump float;
        varying vec2 vPosition;  
        // 取样器，这里可将其理解为纹理对象
        uniform sampler2D u_Sampler;
        void main(void){
            // gl_FragColor = vec4(1.0,1.0,0,1);
            // gl_FragColor = vec4(vPosition.x,vPosition.y,0,1);
            // 通过纹理坐标 取纹理的色系值
            gl_FragColor = texture2D(u_Sampler,vPosition);
        }
    `
})

onMounted(() => {
    const gl = canvasRef.value?.getContext('webgl');
    if (!gl) return;
    const veShader = gl.createShader(gl.VERTEX_SHADER);
    const faShader = gl.createShader(gl.FRAGMENT_SHADER);
    if (!veShader || !faShader) return;
    gl.shaderSource(veShader, veSource.value);
    gl.shaderSource(faShader, faSource.value);
    gl.compileShader(veShader);
    gl.compileShader(faShader);

    if (!gl.getShaderParameter(veShader, gl.COMPILE_STATUS)) {
        var err = gl.getShaderInfoLog(veShader);
        alert(err);
        return;
    }
    if (!gl.getShaderParameter(faShader, gl.COMPILE_STATUS)) {
        var err = gl.getShaderInfoLog(faShader);
        alert(err);
        return;
    }

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, veShader);
    gl.attachShader(program, faShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        var info = gl.getProgramInfoLog(program);
        throw new Error('Could not compile WebGL program. \n\n' + info);
    }

    const view = gl.getUniformLocation(program, 'view');
    gl.uniformMatrix4fv(view, false, glView.value)


    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 对其坐标
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)

    /***
     
    纹理图像(Image) =>纹理对象(TEXTURE_2D)


     */

    // 激活纹理单元
    gl.activeTexture(gl.TEXTURE0);
    // 创建纹理
    const texture = gl.createTexture();
    if (!texture) return;
    // 纹理对象绑定
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // 参数设置
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);



    // 纹理坐标 和  贴图范围坐标
    const points = new Float32Array([
        // 0, 1, 100, 100,
        // 1, 1, 350, 100,
        // 1, 0, 350, 350,
        // 0, 0, 100, 350,


        0, 1, 100, 100,
        1, 1, 500, 100,
        1, 0, 500, 300,
        0, 0, 100, 300,
    ]);
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const BL = points.BYTES_PER_ELEMENT;
    const a_Position = gl.getAttribLocation(program, 'a_Position');
    gl.enableVertexAttribArray(a_Position);
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, BL * 4, BL * 2)

    const t_Position = gl.getAttribLocation(program, 't_Position')
    gl.enableVertexAttribArray(t_Position);
    gl.vertexAttribPointer(t_Position, 2, gl.FLOAT, false, BL * 4, BL * 0)

    gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length / 4)

    // loadImage(import('./images/point64.png')).then(img => {
    loadImage(import('./images/basetexture.png')).then(img => {
        debugger
        // 设置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
        // // 启用
        const u_Sampler = gl.getUniformLocation(program, 'u_Sampler');
        // // 0 ==>gl.TEXTURE0
        gl.uniform1i(u_Sampler, 0)

        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length / 4)
    });
})
</script>
  
<style></style>
  